<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
  <title>注册</title>
  <link rel="stylesheet" href="static/css/animate.css">
  <link rel="stylesheet" href="static/bootstrap-3.3.7-dist/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="css/webbase.css"/>

  <script src="static/js/jquery.min.js"></script>
  <script src="static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
  <script src="static/js/wow.min.js"></script>
  <script type="text/javascript"> new WOW().init(); </script>
  <style type="text/css">
    .login-back {
      height: 100%;
      padding-left: 5%;
      background: url("static/images/login/login-background.jpg") no-repeat no-repeat;
    }

    nav.navbar.navbar-default {
      padding: 8px 0px;
      background: white;
      margin-bottom: 1%;
    }

    #btnRegist {
      width: 100%;
      height: 35px;
      line-height: 18px;
      color: #fff;
    }

    #msg {
      text-align: center;
      margin-bottom: 10px;
      height: 33px;
      line-height: 33px;
      margin-top: -5px;
      font-size: 11px;
      font-weight: bold;
      border-radius: 8px;
      display: none;
      border: solid 1px #ffc2b3;
      background: #ffd1ca;
      color: red;
    }
  </style>
</head>
<body>
<!-- Head -->
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header pull-left" style="margin-top: 3px;">
      <a href="index.html">
        <img src="img/Logo.png" style="margin-left: 30px;">
      </a>
    </div>
  </div><!-- /.container-->
</nav>

<!-- content -->
<div class="login-content" style="height: 480px;">
  <div class="col-md-1 hidden-sm hidden-xs"></div>
  <div class="col-md-7 col-sm-6 login-back hidden-sm hidden-xs"></div>
  <div class="container col-md-3  col-sm-5 wow fadeInRight" style="margin-top: 1%; margin-left: 3%">
    <div class="panel panel-default">
      <div class="panel-body" style="padding: 35px 20px 20px;">

        <div id="msg">
          <span></span>
        </div>

        <div class="form-group">
          <label for="phone">手机号</label>
          <input type="text" class="form-control" id="phone" name="phone" autocomplete="off" placeholder="手机号">
        </div>

        <!-- 验证码  -->
        <div class="form-group">
          <div class="col-md-7 col-sm-7 col-xs-7" style="margin-left: -15px;">
            <label for="verification">验证码</label>
            <input type="text" class="form-control" id="verification" name="verification" autocomplete="off" placeholder="验证码">
          </div>
          <div class="col-md-5 col-sm-5 col-xs-5" style="padding: 0px">
            <a href="javascript:void(0);" onclick="VerificationCode()">
              <img id="randCodeImage" alt="验证码" style="margin-top: 10px; width:120px; height:45px"/>
            </a>
          </div>
        </div>
        <div style="clear: both"></div>

        <!-- 短信验证码  -->
        <div class="form-group" style="margin-top: 15px;">
          <div class="col-md-7 col-sm-7 col-xs-7" style="margin-left: -15px;">
            <label for="phoneCode">短信验证码</label>
            <input type="text" class="form-control" id="phoneCode" name="phoneCode" autocomplete="off" placeholder="短信验证码">
          </div>
          <div class="col-md-5 col-sm-5 col-xs-5" style=" padding: 0px">
            <button type="button" class="btn btn-danger" id="btn-send-message" disabled style="margin-top: 23px;">
              获取验证码
            </button>
          </div>
        </div>
        <div style="clear: both"></div>

        <div class="form-group" style="margin-top: 15px;">
          <label for="password">设置密码</label>
          <input type="password" class="form-control" id="password" name="password" autocomplete="off" placeholder="设置密码">
        </div>

        <div class="form-group" style="margin-top: 15px;">
          <label for="rePassword">确认密码</label>
          <input type="password" class="form-control" id="rePassword" name="rePassword" autocomplete="off" placeholder="确认密码">
        </div>

        <button type="button" class="btn btn-info" id="btnRegist">注&nbsp;&nbsp;册</button>
      </div>
    </div>
  </div>
  <div class="col-md-1  col-sm-2"></div>
</div>
<!--页面底部-->
<div class="clearfix footer hidden-xs hidden-sm">
  <div class="py-container">
    <div class="footlink">
      <div class="Mod-copyright">
        <ul class="helpLink">
          <li>关于我们<span class="space"></span></li>
          <li>联系我们<span class="space"></span></li>
          <li>关于我们<span class="space"></span></li>
          <li>商家入驻<span class="space"></span></li>
          <li>营销中心<span class="space"></span></li>
          <li>友情链接<span class="space"></span></li>
          <li>关于我们<span class="space"></span></li>
          <li>营销中心<span class="space"></span></li>
          <li>友情链接<span class="space"></span></li>
          <li>关于我们</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!--页面底部END-->
</body>

<script type="text/javascript">
  // 进入此页面先生成一个随机数，作为验证码redis的key
  var yzmRedisKey = Math.floor(Math.random() * Math.pow(10, 8));

  /**
   *  验证码刷新
   */
  function VerificationCode() {
    var rad = Math.floor(Math.random() * Math.pow(10, 8));
    //uuuy是随便写的一个参数名称，后端不会做处理，作用是避免浏览器读取缓存的链接
    $("#randCodeImage").attr("src", "http://localhost:3001/generate?uuuy=" + rad + "&yzmRedisKey=" + yzmRedisKey);
  }

  $(function () {
    // 1：验证码刷新
    VerificationCode();

    // 2：当手机号码输入框失去焦点时
    $("#phone").focusout(function () {
      var telephone = $("#phone").val();
      // 校验手机号合法性
      var reg_tel = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (telephone.length > 0) {
        if (!reg_tel.test(telephone)) {
          $("#msg span").text("手机号格式不正确");
          $("#msg").show(300);
          $("#btn-send-message").attr("disabled", "true");
          return;
        } else {
          // 发送短信按钮可用
          $("#btn-send-message").removeAttr("disabled");
          $("#msg").hide(300);
        }
      }
    });

    // 3：点击短信发送按钮
    $("#btn-send-message").click(function () {
      // 隐藏提示框
      $("#msg").hide(300);
      // 获取属性值
      var phone = $.trim($("#phone").val());
      var verification = $.trim($("#verification").val());
      // 校验合法性
      if (phone.length <= 0 || verification.length <= 0) {
        $("#msg span").text("手机号或验证码不能为空");
        $("#msg").show(300);
      }

      // 发送验证码按钮变灰，并且倒计时
      $("#btn-send-message").attr("disabled", "true");
      $("#btn-send-message").text("获取验证码(60)");
      var time = 60;
      var timer = setInterval(function () {
        $("#btn-send-message").text("获取验证码(" + (--time) + ")");
        if (time === 0) {
          clearInterval(timer);
          // 发送短信按钮可用
          $("#btn-send-message").removeAttr("disabled");
          $("#btn-send-message").text("获取验证码");
        }
      }, 1000);

      // 发送短信
      $.ajax({
        url: "http://localhost:3001/sendMessageCode",
        type: "POST",
        data: JSON.stringify({
          "yzmRedisKey": yzmRedisKey,
          "verification": verification,
          "phone": phone
        }),
        contentType: 'application/json',
        success: function (data) {
          // 提示错误信息
          if (!data.success) {
            $("#msg span").text(data.errorMsg);
            $("#msg").show(300);
            clearInterval(timer);
            // 发送短信按钮可用
            $("#btn-send-message").removeAttr("disabled");
            $("#btn-send-message").text("获取验证码");
            VerificationCode();
          }
        }
      });
    });// 3：点击短信发送按钮


    // 4：点击注册
    $("#btnRegist").click(function () {
      $("#msg").hide(300);
      // 获取属性值
      var phone = $.trim($("#phone").val());
      var phoneCode = $.trim($("#phoneCode").val());
      var password = $.trim($("#password").val());
      var rePassword = $.trim($("#rePassword").val());

      //验证
      if (password.length === 0 || rePassword.length === 0
          || phoneCode.length === 0 || phone.length === 0) {
        $("#msg span").text("请正确填写");
        $("#msg").show(300);
        return;
      }
      if (password !== rePassword) {
        $("#msg span").text("密码不一致");
        $("#msg").show(300);
        return;
      }

      /* 注册ajax. */
      $.ajax({
        url: "http://localhost:3001/register",
        type: "POST",
        data: JSON.stringify({
          "phone": phone,
          "phoneCode": phoneCode,
          "password": password
        }),
        contentType: 'application/json',
        success: function (data) {
          var rad = Math.floor(Math.random() * Math.pow(10, 8));
          if (!data.success) {
            $("#msg span").text(data.errorMsg);
            $("#msg").show(300);
            //清空验证码输入框内容
            $("#phoneCode").val(""); // 清空并获得焦点
            $("#phoneCode").focus();
          } else {
            location.href = "login.html";
          }
        }
      });
    });
  })
</script>
</html>